<template>
  <div class="min-h-screen bg-gray-900 flex">
    <!-- 左侧薄荷绿侧边栏 -->
    <div class="hidden lg:flex lg:w-200px bg-teal-500 flex-col justify-between py-6">
      <div class="px-4">
        <div class="flex items-center space-x-3 mb-8">
          <div class="w-8 h-8 bg-white rounded-md flex items-center justify-center">
            <span class="text-teal-600 font-bold text-lg">M</span>
          </div>
          <span class="text-white font-semibold">MetaSystem</span>
        </div>

        <!-- 导航菜单 -->
        <nav class="space-y-2">
          <RouterLink
            v-for="item in navItems"
            :key="item.name"
            :to="item.path"
            class="flex items-center space-x-3 p-3 rounded-lg text-white hover:bg-teal-400 transition-colors group"
          >
            <div :class="['w-2 h-2 rounded-full', item.color]"></div>
            <span class="text-sm">{{ item.name }}</span>
          </RouterLink>
        </nav>
      </div>

      <!-- 底部状态 -->
      <div class="px-4">
        <div class="flex items-center justify-between text-white text-sm">
          <div class="flex items-center space-x-2">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
              <path
                fill-rule="evenodd"
                d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z"
                clip-rule="evenodd"
              />
            </svg>
            <span>已同步</span>
          </div>
          <button class="p-1 rounded hover:bg-teal-400">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
              <path
                fill-rule="evenodd"
                d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
                clip-rule="evenodd"
              />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- 中央内容区 -->
    <div class="flex-1 flex items-center justify-center p-8">
      <el-card class="not-found-card bg-white rounded-lg shadow-sm max-w-2xl w-full">
        <div class="text-center">
          <!-- 404图形标识 -->
          <div class="relative mb-8">
            <div class="text-9xl font-bold text-gray-300 opacity-50">404</div>
            <div class="absolute inset-0 flex items-center justify-center">
              <svg
                class="w-32 h-32 text-teal-500"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path
                  fill-rule="evenodd"
                  d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                  clip-rule="evenodd"
                />
              </svg>
            </div>
          </div>

          <h1 class="text-3xl font-bold text-gray-900 mb-4">页面未找到</h1>
          <p class="text-gray-600 mb-2">
            您访问的页面不存在，可能是链接错误或页面已被删除[2](@ref)
          </p>
          <p class="text-gray-500 text-sm mb-8">请检查URL是否正确，或返回首页继续浏览</p>

          <!-- 操作按钮 -->
          <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <el-button
              type="primary"
              size="large"
              class="back-home-btn"
              @click="handleBackHome"
            >
              <template #icon>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                  <path
                    d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
                  />
                </svg>
              </template>
              返回首页
            </el-button>

            <el-button
              size="large"
              class="back-btn"
              @click="handleGoBack"
              :disabled="!canGoBack"
            >
              <template #icon>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                  <path
                    fill-rule="evenodd"
                    d="M9.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 9H15a1 1 0 110 2H7.414l2.293 2.293a1 1 0 010 1.414z"
                    clip-rule="evenodd"
                  />
                </svg>
              </template>
              返回上页
            </el-button>
          </div>

          <!-- 快速导航 -->
          <div class="mt-12 pt-8 border-t border-gray-200">
            <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-4">
              快速导航
            </h3>
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
              <RouterLink
                v-for="item in quickNavItems"
                :key="item.name"
                :to="item.path"
                class="p-4 rounded-lg border border-gray-200 hover:border-teal-300 hover:bg-teal-50 transition-all group"
              >
                <div class="flex items-center space-x-3">
                  <div :class="['w-3 h-3 rounded-sm', item.iconColor]"></div>
                  <span
                    class="text-sm font-medium text-gray-700 group-hover:text-teal-600"
                    >{{ item.name }}</span
                  >
                </div>
                <p class="text-xs text-gray-500 mt-1">{{ item.description }}</p>
              </RouterLink>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";

const router = useRouter();
const route = useRoute();

// 导航历史状态
const canGoBack = computed(() => window.history.length > 1);

// 导航菜单项
const navItems = [
  { name: "知识库", path: "/knowledge", color: "bg-blue-500" },
  { name: "组件库", path: "/components", color: "bg-yellow-500" },
  { name: "学习区", path: "/learning", color: "bg-red-500" },
];

// 快速导航项
const quickNavItems = [
  {
    name: "知识库",
    path: "/knowledge",
    description: "文档和代码库",
    iconColor: "bg-blue-500",
  },
  {
    name: "组件库",
    path: "/components",
    description: "可复用组件",
    iconColor: "bg-yellow-500",
  },
  {
    name: "学习区",
    path: "/learning",
    description: "学习进度管理",
    iconColor: "bg-red-500",
  },
];

// 返回首页
const handleBackHome = (): void => {
  router.push("/");
};

// 返回上页
const handleGoBack = (): void => {
  if (canGoBack.value) {
    router.back();
  } else {
    ElMessage.warning("没有可返回的页面历史");
  }
};

// 记录404错误（实际项目中可发送到监控系统）
console.warn("404 Error - Path not found:", route.path);
</script>

<style scoped>
.not-found-card {
  border: none;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
}

.not-found-card :deep(.el-card__body) {
  padding: 3rem;
}

.back-home-btn {
  background-color: #00a99d;
  border-color: #00a99d;
  transition: all 0.2s ease;
}

.back-home-btn:hover {
  background-color: #009688;
  border-color: #009688;
  transform: translateY(-1px);
}

.back-btn {
  border-color: #e5e7eb;
  transition: all 0.2s ease;
}

.back-btn:hover {
  border-color: #00a99d;
  color: #00a99d;
  transform: translateY(-1px);
}

/* 响应式设计 */
@media (max-width: 960px) {
  .not-found-card :deep(.el-card__body) {
    padding: 2rem;
  }
}

@media (max-width: 640px) {
  .not-found-card :deep(.el-card__body) {
    padding: 1.5rem;
  }
}
</style>
